/** 上下图文格式 */

import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {BindItem} from '../mobx/home';
import {ObserverText} from './ObserverText';
import {contextStatus} from '../utils';
import {Img} from './Img';
import {dpw14, dpw16, dpw176, dpw180, dpw186, dpw4, dpw8} from '../constants';
import {LinearGradient} from './LinearGradient';

interface ImgTextProps extends BindItem {
  isHor?: boolean; // 是否是横图
  isTag?: boolean; // 是否显示连载tag
  isJoin?: boolean; // 图片地址是否手动拼接
  idx?: number;
  toDetail?: Function;
}

const orderObj: Record<string, string[]> = Object.freeze({
  '00': ['color_22', 'color_1'],
  '01': ['color_15', 'color_18'],
  '02': ['color_16', 'color_19'],
});

export const ImgText2 = (props: ImgTextProps) => {
  const {
    Author,
    ChapterCount,
    CoverUrl,
    ExtensionUrl,
    ReadCount,
    Status,
    Title,
    Description,
    Type,
    isHor,
    isTag = true,
    isJoin = true,
    idx,
    toDetail,
    BID,
  } = props;

  return (
    <TouchableOpacity
      style={styles.box}
      onPress={() => {
        toDetail && toDetail({BID});
      }}>
      <View style={styles.imgbox}>
        <Img
          url={isHor ? ExtensionUrl : CoverUrl}
          style={styles.img}
          isJoin={isJoin}
        />
        {isTag && (
          <LinearGradient
            style={styles.tagbox}
            themeColors={
              Number(idx) > 2 ? ['color_17', 'color_20'] : orderObj[`0${idx}`]
            }>
            <ObserverText
              tKey={`${Number(idx) + 1}`}
              style={styles.tag}
              themeStyle={{color: 'color_2'}}
              type="desc"
            />
          </LinearGradient>
        )}
      </View>
      {Title && (
        <ObserverText
          tKey={Title}
          type="card2-title"
          numberOfLines={1}
          ellipsizeMode="tail"
        />
      )}
      {Status && (
        <ObserverText
          {...contextStatus({Status, Type})}
          themeStyle={{color: 'color_2'}}
          type="desc"
        />
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  box: {
    overflow: 'hidden',
    width: '100%',
    height: '100%',
  },
  imgbox: {
    position: 'relative',
  },
  img: {
    height: dpw176,
    objectFit: 'cover',
    borderRadius: dpw8,
    width: '100%',
    margin: 0,
  },
  tagbox: {
    position: 'absolute',
    left: 0,
    top: 0,
    borderBottomRightRadius: dpw8,
    borderTopLeftRadius: dpw8,
    zIndex: 1,
  },
  tag: {
    paddingHorizontal: dpw8,
    paddingVertical: dpw4,
    fontSize: dpw14,
    lineHeight: dpw16,
  },
});
